<template>
	<view class="container">
<!-- 
		<view class="tab-bar">
			<view v-for="(item, index) in tabList" :key="index" class="tab-item"
				:class="{ active: activeIndex === index }" @click="switchTab(index)">
				{{ item.text }}
			</view>
		</view> -->

		<text class="intro">详见：</text>
		<view class="spray-list">
			<view class="spray-list-item" v-for="(item,index) in sprayInfoList" :key="index">
				<sprayCard @switchStatusHandler="switchChildStatus" :sprayInfo="item" :ref="item.ref"></sprayCard>
			</view>
		</view>
		
		<navigator url="/pages/canvasBtn/canvasBtn" style="margin: 20px auto; 
		 width: 50%; height: 30px; color: blue;
		text-align: center; line-height: 30px;text-decoration: underline;">绘制可点击按钮</navigator>
	</view>
</template>

<script>
	import sprayCard from '../../componets/sprayCard/sprayCard.vue'
	export default {
		data() {
			return {
				sprayInfoList: [{
						count: 10,
						sys: '雾森系统 Pro',
						showBG: false,
						isRuning: false,
						ref: 'item1'
					},
					{
						count: 50,
						sys: '喷泉系统 Pro',
						showBG: false,
						isRuning: false,
						ref: 'item2',
					},
				],
				// activeIndex: 0 // 当前激活的tab索引
			}
		},
		components: {
			sprayCard
		},
		onTabItemTap(item) {
			console.log(item);
			// 点击了首页
			// if (
			// 	item.index == 0) {
			// 	console.log("首页");
			// 	uni.setTabBarItem({
			// 		index: 0,
			// 		text: '首页',
			// 		iconPath: 'static/tabBarBlue/index1.png',
			// 		//图片路径
			// 		selectedIconPath: 'static/tabBarBlue/index2.png'
			// 		//选中时的图片路径
			// 	})
			// 	uni.setTabBarItem({
			// 		index: 1,
			// 		text: '商城',
			// 		iconPath: 'static/tabBarBlue/mall1.png',
			// 		//图片路径
			// 		selectedIconPath: 'static/tabBarBlue/mall2.png'
			// 		//选中时的图片路径
			// 	})
			// 	uni.setTabBarItem({
			// 		index: 2,
			// 		text: '我的',
			// 		iconPath: 'static/tabBarBlue/mine1.png',
			// 		//图片路径
			// 		selectedIconPath: 'static/tabBarBlue/mine2.png'
			// 		//选中时的图片路径
			// 	})
			// 	uni.setTabBarStyle({
			// 		color: '#E0E3ED',
			// 		//tab 上的文字默认颜色
			// 		selectedColor: '#ffffff',
			// 		//tab 上的文字选中时的颜色
			// 		backgroundColor: '#3A57A1',
			// 		//tab 的背景色，HexColor
			// 		borderStyle: 'white'
			// 		//tabBar上边框的颜色， 仅支持 black/white
			// 	})
			// }
			// // 点击了商城
			// if (item.index == 1) {
			// 	console.log("商城");
			// 	uni.setTabBarItem({
			// 		index: 1,
			// 		text: '商城',
			// 		iconPath: 'static/tabBarWhite/mall1.png',
			// 		//图片路径
			// 		selectedIconPath: 'static/tabBarWhite/mall2.png'
			// 		//选中时的图片路径
			// 	})
			// 	uni.setTabBarItem({
			// 		index: 0,
			// 		text: '首页',
			// 		iconPath: 'static/tabBarWhite/index1.png',
			// 		//图片路径
			// 		selectedIconPath: 'static/tabBarWhite/index2.png'
			// 		//选中时的图片路径
			// 	})
			// 	uni.setTabBarItem({
			// 		index: 2,
			// 		text: '我的',
			// 		iconPath: 'static/tabBarWhite/mine1.png',
			// 		//图片路径
			// 		selectedIconPath: 'static/tabBarWhite/mine2.png'
			// 		//选中时的图片路径
			// 	})
			// 	uni.setTabBarStyle({
			// 		color: '#262626',
			// 		//tab 上的文字默认颜色
			// 		selectedColor: '#35519B',
			// 		//tab 上的文字选中时的颜色
			// 		backgroundColor: '#ffffff',
			// 		//tab 的背景色，HexColor
			// 		borderStyle: 'black'
			// 		//tabBar上边框的颜色， 仅支持 black/white
			// 	})
			// }
			// // 点击了我的
			// if (item.index == 2) {
			// 	console.log("我的");
			// 	uni.setTabBarItem({
			// 		index: 2,
			// 		text: '我的',
			// 		iconPath: 'static/tabBarWhite/mine1.png',
			// 		//图片路径
			// 		selectedIconPath: 'static/tabBarWhite/mine2.png'
			// 		//选中时的图片路径
			// 	})
			// 	uni.setTabBarItem({
			// 		index: 0,
			// 		text: '首页',
			// 		iconPath: 'static/tabBarWhite/index1.png',
			// 		//图片路径
			// 		selectedIconPath: 'static/tabBarWhite/index2.png'
			// 		//选中时的图片路径
			// 	})
			// 	uni.setTabBarItem({
			// 		index: 1,
			// 		text: '商城',
			// 		iconPath: 'static/tabBarWhite/mall1.png',
			// 		//图片路径
			// 		selectedIconPath: 'static/tabBarWhite/mall2.png'
			// 		//选中时的图片路径
			// 	})
			// 	uni.setTabBarStyle({
			// 		color: '#262626',
			// 		//tab 上的文字默认颜色
			// 		selectedColor: '#35519B',
			// 		//tab 上的文字选中时的颜色
			// 		backgroundColor: '#ffffff',
			// 		//tab 的背景色，HexColor
			// 		borderStyle: 'black'
			// 		//tabBar上边框的颜色， 仅支持 black/white
			// 	})
			// }
		},
		mounted() {
			// 在这里可以访问子组件实例
			// this.itemList.forEach((item, index) => {
			// 	const childRef = this.$refs[item][0]; // 获取对应子组件的实例
			// 	if (childRef) {
			// 		// 调用子组件的方法
			// 		childRef.switchChildStatus();
			// 	}
			// });
		},
		methods: {
			switchTab(index) {
				this.activeIndex = index;
				// 可以添加更多的动画逻辑
			},
			switchChildStatus(data) {
				// console.log(data);
				// console.log(typeof(data));
				var eleIndex;
				if (data === 'item1') {
					// console.log("111");
					eleIndex = 0;
				} else if (data === 'item2') {
					// console.log("222");
					eleIndex = 1;
				}
				this.sprayInfoList[eleIndex].showBG = !this.sprayInfoList[eleIndex].showBG;
				this.sprayInfoList[eleIndex].isRuning = !this.sprayInfoList[eleIndex].isRuning
				setTimeout(() => {
					this.sprayInfoList[eleIndex].showBG = false;
				}, 100);

			},
		}
	}
</script>

<style lang="scss">
	.container {
		padding: 10rpx;

		.spray-list {
			display: grid;
			grid-template-columns: 50% 50%;
			// border: 1px rebeccapurple solid;

			.spray-list-item {
				display: flex;
				flex-direction: row;
				justify-content: center;
			}
		}

	}

	.tab-item {
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		transition: transform 1s ease;
		/* 添加过渡动画 */
	}

	.tab-item::active {
		transform: scale(3);
		/* 激活时放大 */
	}
</style>